<template>
  <div class="from">
    <div class="title">{{jiaban}}申请</div>
    <div class="black">
      <p>
        {{jiaban}}日期
        <span>*</span>
      </p>
      <div class="inp" @click="isShow=true">
        <div class="iconfont icon-rili"></div>
        <input type="text" v-model="time1" />
      </div>
    </div>
    <div class="black">
      <p>{{jiaban}}类型</p>
      <div class="inp">
        <select name id>
          <option value>默认</option>
        </select>
      </div>
    </div>
    <div class="black" @click="isShows=true">
      <p>
        {{jiaban}}起始时间
        <span>*</span>
      </p>
      <div class="inp">
        <div class="iconfont icon-rili"></div>
        <input type="text" v-model="time2" />
      </div>
    </div>
    <div class="black" @click="isShowss=true">
      <p>
        {{jiaban}}截止时间
        <span>*</span>
      </p>
      <div class="inp">
        <div class="iconfont icon-rili"></div>
        <input type="text" v-model="time3" />
      </div>
    </div>
    <div class="black">
      <p>共计时数</p>
      <div class="inp">
        <span v-if="this.num3>0">{{parseInt((this.num3-this.num2)/1000/60/60)}}</span>
      </div>
    </div>
    <div class="dd"></div>
    <div class="blacks">
      <p>{{jiaban}}事由</p>
      <div class="inp">
        <input type="text"  v-model="title"/>
      </div>
    </div>
    <div class="dd"></div>
    <div class="div">
      <img src="/img/addicon.png" alt />
      <p>上传附件</p>
    </div>
    <div class="time" v-show="isShow">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="gettime"
        @cancel="isShow=false"
      />
    </div>
    <div class="time" v-show="isShows">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="gettimes"
        @cancel="isShows=false"
      />
    </div>
    <div class="time" v-show="isShowss">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="gettimess"
        @cancel="isShowss=false"
      />
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      isShow: false,
      isShows: false,
      isShowss: false,
      minDate: new Date(),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      num1: 0,
      num2: 0,
      num3: 0,
      time1: `${new Date().getFullYear()}-${new Date().getMonth() +
        1}-${new Date().getDate()}   ${new Date().getHours()}:${new Date().getMinutes()}`,
      time2: "",
      time3: "",
      title:''
    };
  },
  props: {
    jiaban: {
      default: "加班",
      type: String
    }
  },
  methods: {
    gettime() {
      this.isShow = false;
      this.num1 = this.currentDate * 1;
      this.time1 = `${this.currentDate.getFullYear()}-${this.currentDate.getMonth() +
        1}-${this.currentDate.getDate()}   ${this.currentDate.getHours()}:${this.currentDate.getMinutes()}`;
      if(this.num1>this.num2&&this.num1>0&&this.num2!==0){
        Dialog({message:"加班/休假的日期不能高于加班/休假的起始时间"});
        this.time1=`${new Date().getFullYear()}-${new Date().getMonth() +
        1}-${new Date().getDate()}   ${new Date().getHours()}:${new Date().getMinutes()}`;
        this.time2 = "";
        this.time3 = "";
        this.num2=0;
        this.num3=0;
      }
      },
      
    gettimes() {
      this.isShows = false;
      this.num2 = this.currentDate * 1;
      if (this.num2 >= this.num1) {
        if (this.num1 === 0) {
          Dialog({ message: "加班/休假时间只是展示，需要确定！！！" });
          this.time2 = "";
          this.time3 = "";
          this.num2=0;
          this.num3=0;
        } else {
          this.time2 = `${this.currentDate.getFullYear()}-${this.currentDate.getMonth() +
            1}-${this.currentDate.getDate()}   ${this.currentDate.getHours()}:${this.currentDate.getMinutes()}`;
        }
      } else {
        Dialog({ message: "加班/休假起始时间不能低于加班/休假时间" });
        this.time2 = "";
        this.num2=0;
      }
      if(this.num2>this.num3&&this.num3>0){
        Dialog({ message: "加班/休假起始时间不能高于加班/休假终止时间" });
        this.time2 = "";
        this.time3 = "";
        this.num2=0;
        this.num3=0;
      }
    },
    gettimess() {
      this.isShowss = false;
      this.num3 = this.currentDate * 1;
      if (
        this.num3* 1 > this.num2 &&
        this.num2 > 0 &&
        this.num2 >= this.num1
      ) {
        this.time3 = `${this.currentDate.getFullYear()}-${this.currentDate.getMonth() +
          1}-${this.currentDate.getDate()}   ${this.currentDate.getHours()}:${this.currentDate.getMinutes()}`;
      } else {
        Dialog({ message: "时间有问题" });
        this.time3 = "";
        this.num3=0;
      }
    }
  },
  computed:{
    
  }
};
</script>

<style lang='scss' scoped>
.from {
  width: 90%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  margin-top: -30px;
  background: white;
  border-radius: 5px;
  padding: 0 10px;
  .title {
    font-size: 16px;
    line-height: 40px;
    border-bottom: 1px solid #a39e9e;
  }
  .black {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    span {
      color: red;
    }
    input {
      border: 1px solid black;
    }
  }
  .blacks {
    height: 90px;
    display: flex;
    flex-direction: column;
    p {
      line-height: 30px;
      border-bottom: 1px solid rgb(156, 151, 151);
    }
    input {
      border: none;
      outline: none;
    }
  }
  .dd {
    width: 110%;
    height: 10px;
    margin-left: -10px;
    background: #f5f5f5;
  }
  .div {
    display: flex;
    align-items: center;
    img {
      width: 80px;
      height: 80px;
    }
  }
  .time {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 60px;
  }
}
</style>